<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作日志提交系统 - 员工端</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Element UI 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>

    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 30px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .header {
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ebeef5;
            text-align: center;
        }
        .footer {
            margin-top: 20px;
            text-align: center;
            color: #909399;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
            <h1>工作日志提交</h1>
            <p>请填写今日工作内容</p>
        </div>

        <el-form :model="logForm" :rules="rules" ref="logForm" label-width="100px">
            <el-form-item label="工作内容" prop="content">
                <el-input
                        type="textarea"
                        :rows="10"
                        placeholder="请详细描述今日完成的工作内容..."
                        v-model="logForm.content">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitLog" :loading="submitting">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>

        <div class="footer">
            <p>© 2025 公司名称 - 工作日志系统</p>
        </div>
    </div>
</div>

<script>
    // 模拟当前用户信息
    const currentUser = {
        id: 'emp001',
        name: '张三',
    };

    new Vue({
        el: '#app',
        data() {
            return {
                logForm: {
                    content: ''
                },
                rules: {
                    content: [
                        { required: true, message: '请输入工作内容', trigger: 'blur' },
                        { min: 20, message: '工作内容不能少于20个字符', trigger: 'blur' }
                    ]
                },
                submitting: false
            };
        },
        methods: {
            submitLog() {
                this.$refs.logForm.validate((valid) => {
                    if (valid) {
                        this.submitting = true;

                        // 构造提交数据
                        const logData = {
                            authorId: currentUser.id,
                            authorName: currentUser.name,
                            content: this.logForm.content,
                            submitTime: new Date().toISOString()
                        };

                        // 使用axios提交到后端
                        axios.post('http://localhost:8080/document/logs', logData)
                            .then(response => {
                                this.$message({
                                    message: '工作日志提交成功！',
                                    type: 'success'
                                });
                                this.resetForm();
                            })
                            .catch(error => {
                                console.error('提交失败:', error);
                                this.$message.error('提交失败，请稍后重试');
                            })
                            .finally(() => {
                                this.submitting = false;
                            });
                    }
                });
            },
            resetForm() {
                this.$refs.logForm.resetFields();
            }
        }
    });
</script>
</body>
</html>